<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="/konva.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>碰撞距离</title>
</head>

<body>
  <div id="coordinatesDisplay">Coordinates: (0, 0)</div>
  <hr>
  <div id="container"></div>
</body>

</html>
<script>
  function getDistance (x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
  }

  function isColliding (rect1, rect2) {
    /* 
      判断两个矩形是否碰撞
        判断矩形2的左边是否在矩形1的右边，如果是，那么两个矩形没有碰撞
        判断矩形2的右边是否在矩形1的左边，如果是，那么两个矩形没有碰撞
        判断矩形2的上边是否在矩形1的下边，如果是，那么两个矩形没有碰撞
        判断矩形2的下边是否在矩形1的上边，如果是，那么两个矩形没有碰撞
    */
    return !(rect2.x > rect1.x + rect1.width ||
      rect2.x + rect2.width < rect1.x ||
      rect2.y > rect1.y + rect1.height ||
      rect2.y + rect2.height < rect1.y)
  }

  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
  })

  var layer = new Konva.Layer()
  stage.add(layer)

  var rect1 = new Konva.Rect({
    x: 60,
    y: 60,
    width: 100,
    height: 50,
    fill: 'red',
    draggable: true,
  })

  var rect2 = new Konva.Rect({
    x: 220,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    draggable: true,
  })

  layer.add(rect1)
  layer.add(rect2)


  // 自定义精度处理函数
  function roundToPrecision (value, precision) {
    var multiplier = Math.pow(10, precision)
    return Math.round(value * multiplier) / multiplier
  }

  stage.on('dragmove', function (e) {
    // 获取并格式化当前坐标
    var x = roundToPrecision(e.target.x(), 5) // 保留5位小数
    var y = roundToPrecision(e.target.y(), 5)

    var rect1Box = rect1.getClientRect() // 获取第一个矩形的边界框
    var rect2Box = rect2.getClientRect() // 获取第二个矩形的边界框
    /* 
        getClientRect()
             x, y, width, height 这四个属性，
                其中 x 和 y 定义了矩形的左上角的坐标
                width 和 height 定义了矩形的宽度和高度
    */
    // 更新UI显示坐标
    document.getElementById('coordinatesDisplay').innerText = 'Coordinates: (' + x + ', ' + y + ')'

    // 检测碰撞
    if (isColliding(rect1Box, rect2Box)) {
      document.body.style.background = 'lightblue'
    } else {
      document.body.style.background = 'white'
    }

    // 计算中心点距离
    var distance = getDistance(rect1Box.x + rect1Box.width / 2, rect1Box.y + rect1Box.height / 2, rect2Box.x + rect2Box.width / 2, rect2Box.y + rect2Box.height / 2)
    console.log('Distance', distance)
  })

  layer.draw();
</script>